<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div>
          <el-input placeholder="输入关键字进行过滤"  v-model="filterText"></el-input>
          <div class="treeArea">
            <el-tree ref='tree'
                     node-key="id"
                     label="name"
                     show-checkbox
                     v-loading="loading"
                     class="filter-tree"
                     :data="treeData"
                     :props="defaultProps"
                     :expand-on-click-node='false'
                     :filter-node-method="filterNode"
                     :check-strictly="true"
                     :default-checked-keys="treeDataSelect"
                     :highlight-current='true'
                     :default-expand-all='true'
                     @check-change="checkChange">
            </el-tree>
          </div>
          <el-row :gutter="5" style="margin-right: 12px;">
            <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
              <el-button size="small" class="filter-item" type="success" icon="el-icon-success" @click="saveData">保存</el-button>
              <el-button size="small" class="filter-item" type="primary" icon="el-icon-delete" @click="clearData">清空</el-button>
              <el-button size="small" class="filter-item" type="info" icon="el-icon-close" @click="closeComponent">关闭</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryTreeByParentId } from '@/api/systemManage/sysOrgInfo'
export default {
  name: 'sysCropSelect',
  components: {},
  props: {
    multipleSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      treeData: [],
      treeDataSelect: [],
      filterText: '',
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      oldMenuIdArr: [],
      listQuery: {
        condition: {
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'roleId'
        }]
      },
      rowId: ''
    }
  },
  watch: {
    filterText: function(newVal, OldVal) {
      this.$refs.tree.filter(newVal)
    }
  },
  /**
   * 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
   */
  created() {
    //
    this.fetchData()
  },
  /**
   * 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
   */
  mounted() {
    //
  },

  methods: {
    fetchData() {
      this.loading = true
      let queryArgs = {
        status: '0',
        category: '1'
      }
      queryTreeByParentId(queryArgs).then(res => {
        this.treeData = res.data.data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    checkChange(data, checked, indeterminate) {
      if (!this.multipleSelection) {
        if (checked) {
          // 后端返回的node-key不是id，是moduldCode
          this.$refs.tree.setCheckedKeys([data.id])
        }
      }
    },
    saveData() {
      let checkNodes = this.$refs.tree.getCheckedNodes()
      if (!checkNodes || checkNodes.length <= 0) {
        this.$message({
          type: 'error',
          message: '请选择机构！'
        })
        return
      }
      if (this.multipleSelection) { // 多选
        let data = []
        checkNodes.forEach((item, index) => {
          if (item) {
            data.push({
              corpId: item.id,
              corpName: item.name
            })
          }
        })
        this.$emit('closeComponent', 'save', data)
      } else {
        if (checkNodes[0]) {
          let data = {
            corpId: checkNodes[0].id,
            corpName: checkNodes[0].name
          }
          this.$emit('closeComponent', 'save', data)
        }
      }
    },
    clearData() {
      this.$emit('closeComponent', 'clear')
    },
    closeComponent() {
      this.$emit('closeComponent')
    }
  }
}
</script>

<style scoped>
  .treeArea {
    min-height: 40vh;
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 10px;
  }
</style>
